<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
    <h2>用户注册</h2>
    <form>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required v-model="username"><br><br>

        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required v-model="password"><br><br>

        <label for="confirm-password">确认密码：</label>
        <input type="password" id="confirm-password" name="confirm-password" required v-model="confirm_password">
        {{password !== confirm_password ? '两次密码不一致' : ''}}<br><br>

        <label for="nickname">昵称：</label>
        <input type="text" id="nickname" name="nickname" required v-model="nickname"><br><br>

        <label>性别：</label>
        <input type="radio" id="male" name="gender" value="0" v-model="gender">
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="1" v-model="gender">
        <label for="female">女</label><br><br>

        <label>所属城市：</label>

        <select id="province" name="province" v-model="selectedProvince">
            <option value="">请选择省份</option>
            <option v-for="(province, index) in arr" :key="index" :value="index">{{province.name}}</option>
        </select>
        
        <select id="city" name="city" v-model="selectedCity">
            <option value="">请选择城市</option>
            <option v-for="(city, index) in arr[selectedProvince]?.city || []" :key="index" :value="index">{{city.name}}</option>
        </select>
        
        <select id="district" name="district">
            <option value="">请选择区县</option>
            <option v-for="(district, index) in arr[selectedProvince]?.city[selectedCity]?.districtAndCounty || []" :key="index" :value="district">{{district}}</option>
        </select>
        
        <br><br>
        

        <br><br>

        <label>兴趣爱好：</label>
        <input type="checkbox" id="hiking" name="hobby" value="爬山" v-model="arrTabs">爬山
        <input type="checkbox" id="traveling" name="hobby" value="旅游" v-model="arrTabs">旅游
        <input type="checkbox" id="reading" name="hobby" value="看书" v-model="arrTabs">看书
        <input type="checkbox" id="stargazing" name="hobby" value="看星星" v-model="arrTabs">看星星
        <p>{{arrTabs.join('、')}}</p>

        <input type="submit" value="提交" @click.prevent="submitForm">
    </form>

    <table border="1">
        <thead bgcolor="#ccc">
            <tr>
                <th>用户名</th>
                <th>密码</th>
                <th>昵称</th>
                <th>性别</th>
                <th>兴趣爱好</th>
                <th>所属城市</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{username}}</td>
                <td>{{password}}</td>
                <td>{{nickname}}</td>
                <td>{{gender == 0 ? '男' : gender == 1 ? '女' : '未知'}}</td>
                <td>{{arrTabs.join('、')}}</td>
                <td>{{selectedCity}}</td>
                
            </tr>
        </tbody>
    </table>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            confirm_password: '',
            nickname: '',
            gender: '0',
            arrTabs: [],
            selectedProvince: '',
            selectedCity: '',
            selectedDistrict: '',

            arr: [
                {
                    name: "河北省",
                    city: [
                        {
                            name: "石家庄市",
                            districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区"]
                        },
                        {
                            name: "张家口市",
                            districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区"]
                        },
                        {
                            name: "承德市",
                            districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇"]
                        },
                        {
                            name: "秦皇岛市",
                            districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县"]
                        }
                    ]
                },
                {
                    name: "山西省",
                    city: [
                        {
                            name: "太原市",
                            districtAndCounty: ["杏花岭区", "小店区", "迎泽区", "尖草坪区", "万柏林区", "晋源区", "古交市", "清徐县"]
                        },
                        {
                            name: "朔州市",
                            districtAndCounty: ["朔城区", "平鲁区", "山阴县", "岱岳乡", "应县", "金城镇", "右玉县", "新城镇", "怀仁县", "云中镇"]
                        },
                        {
                            name: "大同市",
                            districtAndCounty: ["城区", "矿区", "南郊区", "新荣区", "阳高县", "龙泉镇", "天镇县", "玉泉镇", "广灵县"]
                        },
                        {
                            name: "阳泉市",
                            districtAndCounty: ["城区", "矿区", "郊区", "平定县", "冠山镇", "盂县", "秀水镇"]
                        }
                    ]
                }
            ]
        },
        computed: {
            
        },
        methods: {
            submitForm() {
                if (this.password !== this.confirm_password) {
                    alert('两次密码不一致');
                    return;
                }
                console.log('用户名:', this.username);
                console.log('密码:', this.password);
                console.log('确认密码:', this.confirm_password);
                console.log('昵称:', this.nickname);
                console.log('性别:', this.gender == 0 ? '男' : this.gender == 1 ? '女' : '未知');
                console.log('兴趣爱好:', this.arrTabs.join('、'));
                console.log('所属城市:', this.selectedCity);
            }
        }
    });
</script>
